<template>
  <div class="app-container">
    <div>
      <div>
        <table>
          <tr>
            <td>案件名称:</td>
            <td>
              <el-input v-model="listQuery.case_name" placeholder="请输入案件名称" style="width:200px;"/>
            </td>
            <td>
              <el-button type="primary" size="small" @click="getList">搜索</el-button>
            </td>
          </tr>
        </table>
      </div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="案件编号">
          <template slot-scope="scope">
            <span style="color:green">{{ scope.row.case_code }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="案件名称">
          <template slot-scope="scope">
            <span>{{ scope.row.case_name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="案件类型">
          <template slot-scope="scope">
            <span>{{ scope.row.case_type | formatCaseType }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="案件阶段">
          <template slot-scope="scope">
            <span>{{ scope.row.case_step | formatCaseStep }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="初审公告">
          <template slot-scope="scope">
            <span>{{ scope.row.case_publish_date | formatDateFormatYMD }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="立案日">
          <template slot-scope="scope">
            <span>{{ scope.row.case_created_date | formatDateFormatYMD }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="actionClass">
              <router-link :to="'/case/no-lawsuit/edit/'+scope.row.id">
                <span>编辑</span>
              </router-link>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :limit.sync="listQuery.pageSize"
        :page.sync="listQuery.pageIndex"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { CaseList } from '@/api/case'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { formatDate } from '@/utils/date'

export default {
  name: 'NoLawsuitList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    formatDateFormatYMD(time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    },
    formatCaseType(case_type) {
      const option_case_type = [
        { value: 2, label: '国内实用新型专利' },
        { value: 3, label: '国内外观设计专利' },
        { value: 4, label: '国内商标' },
        { value: 5, label: '国内软件著作权' },
        { value: 6, label: '马德里商标注册' },
        { value: 7, label: '指定国商标注册' },
        { value: 8, label: '国内作品著作权' },
        { value: 9, label: '上海市高新技术成果转化认定' },
        { value: 10, label: '上海市创新基金申报' },
        { value: 11, label: '其他科技项目' },
        { value: 12, label: '法律' },
        { value: 13, label: '其他' },
        { value: 14, label: 'PCT国际阶段' },
        { value: 15, label: 'PCT发明进入中国' },
        { value: 16, label: 'PCT发明进入中国' },
        { value: 17, label: '外观设计进入中国' },
        { value: 18, label: '指定国发明专利' },
        { value: 19, label: '指定国实用新型专利' },
        { value: 20, label: '指定国外观设计专利' },
        { value: 21, label: '国内集成电路步图设计' },
        { value: 22, label: '高新技术企业认定' }]
      return (option_case_type.find((item) => item.value === case_type) || { label: '' }).label
    },
    formatCaseStep(case_step) {
      const option_case_step = [
        { value: 2, label: '国内实用新型专利' },
        { value: 3, label: '国内外观设计专利' },
        { value: 4, label: '国内商标' },
        { value: 5, label: '国内软件著作权' },
        { value: 6, label: '马德里商标注册' },
        { value: 7, label: '指定国商标注册' },
        { value: 8, label: '国内作品著作权' },
        { value: 9, label: '上海市高新技术成果转化认定' },
        { value: 10, label: '上海市创新基金申报' },
        { value: 11, label: '其他科技项目' },
        { value: 12, label: '法律' },
        { value: 13, label: '其他' },
        { value: 14, label: 'PCT国际阶段' },
        { value: 15, label: 'PCT发明进入中国' },
        { value: 16, label: 'PCT发明进入中国' },
        { value: 17, label: '外观设计进入中国' },
        { value: 18, label: '指定国发明专利' },
        { value: 19, label: '指定国实用新型专利' },
        { value: 20, label: '指定国外观设计专利' },
        { value: 21, label: '国内集成电路步图设计' },
        { value: 22, label: '高新技术企业认定' }]
      return (option_case_step.find((item) => item.value === case_step) || { label: '' }).label
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        case_category: 1,
        case_name: '',
        pageIndex: 0,
        pageSize: 10
      },
      dialogChangeContractStatusFormVisible: false,
      changeContractStatusForm: {
        contract_id: 0,
        contract_status: '0'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    judgeContractDialog(obj) {
      this.dialogChangeContractStatusFormVisible = true
      this.changeContractStatusForm.contract_id = obj.row.id
      this.changeContractStatusForm.contract_status = obj.row.contract_status.toString()
    },
    getList() {
      const that = this
      that.listLoading = true
      CaseList(this.listQuery).then(response => {
        that.list = response.data
        that.total = response.page_count
        that.listLoading = false
      }).catch(() => {
        that.list = []
        that.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
<style>
.actionClass span, .action_dropdown span {
  color: #409EFF;
}

</style>
